<template>
  <div>
    <van-picker ref="rent" :columns="columns" @change="onChange" />
    <!-- 确定与取消 -->
    <div class="sun_mode_footer_button">
      <button class="qx">取消</button>
      <button class="qd" @click="onClick">确定</button>
    </div>
  </div>
</template>

<script>
// import { queryHouses } from '@/api/sun'
import { cityInfo } from '@/api/city'
import { housesTerm } from '@/api/sun'
export default {
  props: {
    city: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      columns: []
    }
  },
  async created() {
    // 根据条件查询房屋
    // const res = await queryHouses(this.value)
    // console.log(res)
    // 根据城市名称查询该城市信息
    const res2 = await cityInfo(this.city.label)
    // 地铁接口
    const res3 = await housesTerm(res2.body.value)
    const columns = res3.body.price.map((item) => item.label)
    this.columns = columns
  },
  methods: {
    onChange() {
      const value = this.$refs.rent.getValues()
      return value
    },
    onClick() {
      const [value] = this.onChange()
      this.$emit('handlerRent', value)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
// 按钮
.sun_mode_footer_button {
  display: flex;
  height: 50px;
  .qx {
    width: 125px;
    background-color: #fff;
    color: #21b97a;
    font-size: 18px;
  }
  .qd {
    width: 250px;
    background-color: #21b97a;
    color: #fff;
    font-size: 18px;
  }
}
</style>
